<template>
  <div class="container">
    <div class="homeTitle">
      <div>
        订单管理<i>{{ days()[1] }}</i>
      </div>
      <div class="detailClass" @click="itemClick()">
        <div>
          订单明细
        </div>
        <el-icon>
          <ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="containerBox">
      <div class="item" @click="itemClick(2)">
        <div class="tit">
          <img src="/@/assets/icons/gzt_daijiedan.png" />
          <div style="margin-left:5px">待接单</div>
        </div>
        <div class="num" style="color:#fd3333">{{ orderData?.waitingOrders }}</div>
      </div>
      <div class="item" @click="itemClick(3)">
        <div class="tit">
          <img src="/@/assets/icons/gzt_daipaisong.png" />
          <div style="margin-left:5px">待派送</div>
        </div>
        <div class="num" style="color:#fd3333">{{ orderData?.deliveredOrders }}</div>
      </div>
      <div class="item" @click="itemClick(5)">
        <div class="tit">
          <img src="/@/assets/icons/gzt_wancheng.png" />
          <div style="margin-left:5px">已完成</div>
        </div>
        <div class="num">{{ orderData?.completedOrders }}</div>
      </div>
      <div class="item" @click="itemClick(6)">
        <div class="tit">
          <img src="/@/assets/icons/gzt_quxiao.png" />
          <div style="margin-left:5px">已取消</div>
        </div>
        <div class="num">{{ orderData?.cancelledOrders }}</div>
      </div>
      <div class="item" @click="itemClick()">
        <div class="tit">
          <img src="/@/assets/icons/gzt_quanbu.png" />
          <div style="margin-left:5px">全部订单</div>
        </div>
        <div class="num">{{ orderData?.allOrders }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="overview">
import { useRouter } from "vue-router"
import { ArrowRight } from "@element-plus/icons-vue"
import { getday } from '/@/utils/formValidate'
import { Session } from "/@/utils/storage";
import { watch,ref } from "vue";

const router = useRouter()

const props = defineProps({
  orderviewData: {
    type: Object
  }
})

let orderData = ref<any>({})

watch(() => props.orderviewData,() => {
  orderData.value = props.orderviewData
},{deep:true,immediate:true})

const days: any = () => {
  return getday()
}

const itemClick = (status?: number) => {
  if (status) {
    router.push({ path: "/order", query: { status } })
    Session.set("orderStatus",status)
  }else{
    Session.set("orderStatus",0)
    router.push({ path: "/order" })
  }
}
</script>
<style lang="scss" scoped>
@import "../css/common.scss"; 
</style>
